<template>
    <ul class="footer">
        <router-link tag="li" to="/" :class="{selected:tabIndex == 0}" @click="tabIndex = 0">
            <img src="../assets/img/home-aitive-icon.png" alt=""  v-if="tabIndex == 0">
            <img src="../assets/img/home-icon.png" alt=""  v-if="tabIndex != 0">
            <p>首页</p>
        </router-link>
        <li class="publish" @click="publish">
            <img src="../assets/img/publish.png" alt="">
            <p>发布</p>
        </li>
        <li :class="{selected:tabIndex == 2}" @click="goSelf">
            <img src="../assets/img/my-icon-active.png" alt="" v-if="tabIndex == 2">
            <img src="../assets/img/my-icon.png" alt="" v-if="tabIndex != 2">
            <p>我的</p>
        </li>
    </ul>
</template>

<script>
    export default {
        props:["tabIndex"],
        data(){
            return {

            }
        },
        methods:{
            goSelf(){
              this.tabIndex = 2;
              this.$login(()=>{
                  this.$router.push({
                      path:"/self"
                  })
              })
            },
            publish(){
                this.$login(()=>{
                    let level = this.$store.state.userinfo.level;
                    if(!level){
                        this.$vux.confirm.show({
                            title:"提示",
                            content:"请先开通会员",
                            // 组件除show外的属性
                            onCancel () {

                            },
                            onConfirm: ()=> {
                                this.$router.push({
                                    path:"/heart"
                                })
                            }
                        })
                    }else{
                        this.$router.push({
                            path:"/publish1"
                        })
                    }
                })
            }
        }
    }
</script>

<style scoped lang="less">
    .footer{
        position: fixed;
        bottom:0;
        width: 100%;
        height: 104px;
        background: #f9f9f9;
        border-top: 2px solid #eee;
        box-sizing: border-box;
        display: flex;
        li{
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            position: relative;
            i{
                color:white;
                font-size: 40px;
            }
            p{
                color:#666;
                font-size: 28px;
            }
        }
        .publish{
            position: relative;
            bottom:34px;
            img{
                width: 110px;
                height:110px;
            }
        }

        .selected{
            i{
                color:#185fff;
            }
            p{
                color:#185fff;
            }
        }
    }
</style>
